<template>
	<view class="smian">
		<!-- 三点评吸 -->
		<view class="table">
			<view class="head">
				<view class="one felx_class">牌号</view>
				<view class="two felx_class">请选择判定结果（点击选择的结果，然后提交即可）</view>
				<view class="three felx_class">操作</view>
			</view>
			<view class="tabItem" v-for="(item,index) in tableData" :key="item.id">
				<view class="item one felx_class">{{item.smokeName}}</view>
				<view class="list two">
					<!-- 		<view :class="['i',item.meetingThreePointCorrelationRep.conclusion == ele.value?'on':'']"
						v-for="ele in resultData" :key="ele.id" @click="select_result(item,ele)">{{ele.value}} </view> -->
					<!-- <view class="i on">1=3</view>  
					<view class="i">2=3</view> -->


					<view :class="['i',item.conclusion == ele.value?'on':'']"
						v-for="ele in resultData" :key="ele.id" @click="select_result(item,ele)">{{ele.value}} </view>




				</view>
				<view class="three">
					<!-- <button :class="['btn' ,item.meetingThreePointCorrelationRep.workStatus == '1'?'':'btnOn']"
						@click="submit(item,index)"
						:disabled="item.meetingThreePointCorrelationRep.workStatus == '1'">{{item.meetingThreePointCorrelationRep.workStatus == '1'?'已提交':'提交'}}</button> -->
						
						<button :class="['btn' ,item.workStatus == '1'?'':'btnOn']"
							@click="submit(item,index)"
							:disabled="item.workStatus == '1'">{{item.workStatus == '1'?'已提交':'提交'}}</button>
				</view>

			</view>
			<!-- 			<view class="tabItem">
				<view class="item">黄金叶 (商鼎)</view> 
				<view class="list">
					<view class="i">1=2</view>
					<view class="i">1=3</view>
					<view class="i">2=3</view>
				</view>
				<view class="btn">提交</view>
			</view> -->
		</view>


		<!-- 		<view class="btns">
			<view class="btn" @click="btn_submit">提交</view>
		</view> -->
		<!-- 		<view class="submit-line">
			<u-button :text="already? '已提交':'提交'" type="success" class="btn" 
			@click="btn_submit" :disabled="already"></u-button>
		</view> -->
		<!-- 提交前的提示 -->
		<u-modal :show="submitShow" title="提交确认" width="300px" content="数据提交后将无法进行修改，您确定要提交吗？"
			:showCancelButton="true" @cancel="submitShow=false" @confirm="submitConfirm" @close="submitClose"></u-modal>

	</view>
</template>

<script>
	import {
		getMeetingThreePoint,
		meetingThreePointCorrelation
	} from "@/api/tPoint.js"
	import request from '../../../utils/request.js'
	export default {
		props: {
			id: {
				type: [Number, String],
				default: 0
			},
			already: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tableData: [],
				resultData: [{
					value: "1=2",
					id: 1
				}, {
					value: "1=3",
					id: 2
				}, {
					value: "2=3",
					id: 3
				}],
				timer: null,
				submitShow: false, //提交前的申请
				form: {}, //要提交的选项
				timer2: null, //循环获取填写的数据
				live: true, //表明页面还存活着
			}
		},

		methods: {

			submitClose() {
				this.submitShow = false
			},

			async submitConfirm() {
				console.log('submitConfirm');
				this.submitShow = false
				let item = this.form
				
				
				
				const res = await request.put('/ipad/meetingThreePointCorrelation/submit?id=' + String(item
						.id) + '&number=' + item
					.number + '&conclusion=' + item.conclusion, {
						id: String(item.id),
						number: item.number,
						conclusion: item.conclusion
					})
				if (res.data) {
					item.workStatus = '1'
					let tempIndex = this.tableData.findIndex(ele => {
						return ele.id == item.id
					})
					this.$set(this.tableData, tempIndex, {
						...item,
						'workStatus': '1'
					})
					uni.showToast({
						title: '提交完成',
						icon: 'success',
						mask: true
					})
					let sum = 0
					this.tableData.forEach(ele => {
						if (ele.workStatus == '1') {
							sum += 1
						}
					})
					if (sum == this.tableData.length) {
						this.$emit('c_submit', '三点评吸');
					}
					// await this.getData()
					this.resetData()
				}
				
				

				// const res = await request.put('/ipad/meetingThreePointCorrelation/submit?id=' + String(item
				// 		.meetingThreePointCorrelationRep.id) + '&number=' + item.meetingThreePointCorrelationRep
				// 	.number + '&conclusion=' + item.meetingThreePointCorrelationRep.conclusion, {
				// 		id: String(item.meetingThreePointCorrelationRep.id),
				// 		number: item.meetingThreePointCorrelationRep.number,
				// 		conclusion: item.meetingThreePointCorrelationRep.conclusion
				// 	})
				// if (res.data) {
				// 	item.meetingThreePointCorrelationRep.workStatus = '1'
				// 	let tempIndex = this.tableData.findIndex(ele => {
				// 		return ele.id == item.id
				// 	})
				// 	this.$set(this.tableData, tempIndex, {
				// 		...item,
				// 		'workStatus': '1'
				// 	})
				// 	uni.showToast({
				// 		title: '提交完成',
				// 		icon: 'success',
				// 		mask: true
				// 	})
				// 	let sum = 0
				// 	this.tableData.forEach(ele => {
				// 		if (ele.meetingThreePointCorrelationRep.workStatus == '1') {
				// 			sum += 1
				// 		}
				// 	})
				// 	if (sum == this.tableData.length) {
				// 		this.$emit('c_submit', '三点评吸');
				// 	}
				// 	// await this.getData()
				// 	this.resetData()
				// }

			},


			// 右侧提交按钮
			async submit(item, index) {
				console.log(item, index);
				this.form = item
				
				if (!item.conclusion) {
					uni.showToast({
						title: '请选择判定结果',
						icon: 'none',
						mask: true
					})
					return false
				}

				// if (!item.meetingThreePointCorrelationRep.conclusion) {
				// 	uni.showToast({
				// 		title: '请选择判定结果',
				// 		icon: 'none',
				// 		mask: true
				// 	})
				// 	return false
				// }


				this.submitShow = true


			},

			// 下方提交
			async btn_submit() {
				this.$emit('c_submit', '三点评吸');
				const res = await request.put('/ipad/meetingThreePointCorrelation/submit/' + this.id, {
					allId: this.id
				})
				console.log(res);



			},
			// 当前烟支的选择结果
			select_result(item, ele) {
				
				if (item.workStatus == '1') {
					uni.showToast({
						title: '已提交的数据不能修改',
						icon: 'none',
						mask: true
					})
				} else {
					this.$set(item, 'conclusion', ele.value);
				}
				

				// if (item.meetingThreePointCorrelationRep.workStatus == '1') {
				// 	uni.showToast({
				// 		title: '已提交的数据不能修改',
				// 		icon: 'none',
				// 		mask: true
				// 	})
				// } else {
				// 	this.$set(item.meetingThreePointCorrelationRep, 'conclusion', ele.value);
				// }


				console.log(item, ele);

			},
			getData() {
				this.tableData = [];
				getMeetingThreePoint({
					allId: this.id
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						const data = res.data || [];
						this.tableData = data;
						console.log(this.tableData)
					}

				})

			},

			/** 重复获得内容 */
			async resetData(loading = false) {
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.resetData()
				}, 1000 * 3)
				const res = await getMeetingThreePoint({
					loading: loading,
					allId: this.id
				})

				console.log('getMeetingThreePoint', res);
				if (res.code === 200) {
					let arr = []
					const data = res.data || []
					console.log(this.tableData);
					data.forEach(ele => {
						let a = this.tableData.find(line => {
							return line.id == ele.id
						})

						if (a) {
							let obj = a.meetingThreePointCorrelationRep || {}
							if (obj.workStatus == '1') { // 如果是已经提交过的，已请求到的数据为准
								arr.push(ele)
							} else {
								arr.push(a)
							}
						} else {
							arr.push(ele)
						}
					})
					this.tableData = arr
				}

			}
		},
		mounted() {
			this.resetData(true)
			let _this = this
			// setInterval(() => {
			// 	_this.getData()
			// }, 10000)

		},
		beforeDestroy() {
			if (this.timer) {
				clearTimeout(this.timer)
			}
			clearTimeout(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;

		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}

	.table {
		width: 678rpx;
		margin: 0 auto;
		padding-bottom: 100rpx;

		.felx_class {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.one {
			width: 150px;
		}

		.two {
			flex: 1;
		}

		.three {
			width: 150px;
		}

		.head {
			height: 29rpx;
			background: #F3FFF9;
			border-radius: 3rpx;
			opacity: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #6C9789;
			font-weight: bold;
			font-size: 11rpx;
			padding: 0 20rpx;
		}



		.tabItem {
			height: 43rpx;
			background: #F8F8F8;
			border-radius: 3rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			margin-top: 10rpx;

			.item {
				// width: 15%;
				font-weight: 400;
				color: #333333;
				color: #333333;
			}

			.list {
				display: flex;
				justify-content: center;
				align-items: center;
				// flex: 1;
				// width: 70%;

				// margin: 0 140rpx;
				.i {
					width: 57rpx;
					height: 27rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					opacity: 1;
					font-weight: 400;
					color: #999999;
					font-size: 11rpx;
					line-height: 27rpx;
					text-align: center;
					overflow: hidden;
					margin: 0 20px;
				}

				.on {
					border: 1rpx solid #27B186;
				}
			}

			.btn {
				width: 57rpx;
				height: 27rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				line-height: 27rpx;
				text-align: center;
				font-size: 11rpx;
				color: #999999;
			}

			.btnOn {
				background: linear-gradient(132deg, #68DC8F 0%, #27B186 100%);
				color: #FFFFFF;
			}
		}

	}

	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 116rpx;
			height: 26rpx;
			border-radius: 3.84rpx;
			text-align: center;
			line-height: 26rpx;
			font-size: 11rpx;
			font-weight: bold;
			color: #FFFFFF;
			background-image: url(../../../static/Rectangle24.png);
			background-size: cover;
			cursor: pointer;

			&:hover {
				opacity: 0.5;
			}

			// &:last-child{
			// 		background-image: url(../../../static/Rectangle113.png);
			// 		margin-left: 41rpx;
			// }
		}
	}
</style>